<template>
  <div class="shareContainer" ref="shareContainer">
    <div class="shareheader">
      <div class="searchContainer">
        <el-form ref="form" :model="queryData" :inline="true">
          <el-form-item label="仓库名称" size="mini">
            <el-input
              v-model="queryData.name"
              placeholder="请输入仓库名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人" size="mini">
            <el-input
              v-model="queryData.contact"
              placeholder="请输入联系人姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="仓库编码" size="mini">
            <el-input
              v-model="queryData.serial_number"
              placeholder="请输入仓库编码"
            ></el-input>
          </el-form-item>
          <el-form-item label="地址" size="mini">
            <el-cascader
              v-model="queryData.provinc"
              :options="cityList"
              :props="{
                value: 'id',
                label: 'name',
                children: 'next_level_data',
              }"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" size="mini">
            <el-input
              v-model="queryData.address"
              placeholder="请输入详细地址"
            ></el-input>
          </el-form-item>
          <el-form-item size="mini">
            <el-button
              type="primary"
              icon="el-icon-search"
              data-tracker="P31-1"
              @click="PageEntrepotList()"
              >查询</el-button
            >
            <el-button
              type="primary"
              plain
              icon="el-icon-refresh-left"
              data-tracker="P31-2"
              @click="resetquery()"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="sharecontent">
      <!-- 头部内容 -->
      <div class="sharecontent_header">
        <div class="sharecontent_header_right">
          <el-button
            v-permission="'company_warehouse_create'"
            type="primary"
            plain
            data-tracker="P31-3"
            @click="handleClick()"
            style="margin: 0px 10px 10px 0px"
            >新增</el-button
          >
          <el-button
            v-permission="'company_warehouse_delete'"
            type="primary"
            plain
            data-tracker="P31-4"
            @click="PageDeleteEntrepot()"
            style="margin: 0px 10px 10px 0px"
            >删除</el-button
          >
        </div>
        <div class="sharecontent_header_left">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="20"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 表单内容 -->
      <div class="sharecontent_content">
        <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :max-height="maxheight"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column fixed prop="serial_number" label="编号" width="150">
          </el-table-column>
          <el-table-column prop="name" label="名称" width="200">
          </el-table-column>
          <el-table-column prop="contact" label="联系人" width="200">
          </el-table-column>
          <el-table-column prop="contact_mobile" label="手机" width="200">
          </el-table-column>
          <el-table-column prop="province" label="地址" width="320">
          </el-table-column>
          <el-table-column prop="warehouse_type" label="仓库类型" width="200">
          </el-table-column>
          <el-table-column prop="ownership_type" label="来源" width="200">
          </el-table-column>
          <el-table-column prop="branch_id" label="网点id" width="200">
          </el-table-column>
          <el-table-column prop="status" label="是否启用" width="200">
          </el-table-column>
          <el-table-column prop="remark" label="描述信息" width="200">
          </el-table-column>
          <el-table-column prop="temp_device" label="温度设备" width="200">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                v-permission="'company_warehouse_detail'"
                @click="handleClick(scope.row, '1')"
                data-tracker="P31-5"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button
                v-permission="'company_warehouse_update'"
                type="text"
                size="small"
                data-tracker="P31-6"
                @click="handleClick(scope.row, '2')"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 弹框内容 -->
      <div>
        <el-dialog
          :title="title_name"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          width="63%"
          :before-close="handleClose"
        >
          <div>
            <el-form
              :inline="true"
              class="demo-form-inline"
              label-width="120px"
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
            >
              <el-form-item label="仓库编号" prop="serial_number">
                <el-input v-model="ruleForm.serial_number"></el-input>
              </el-form-item>
              <el-form-item label="仓库名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="联系人" prop="contact">
                <el-input v-model="ruleForm.contact"></el-input>
              </el-form-item>
              <el-form-item label="联系人手机号" prop="contact_mobile">
                <el-input v-model="ruleForm.contact_mobile"></el-input>
              </el-form-item>
              <el-form-item label="省市区" prop="gobalList">
                <el-cascader
                  v-model="ruleForm.gobalList"
                  :options="cityList"
                  :props="{
                    value: 'id',
                    label: 'name',
                    children: 'next_level_data',
                  }"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="详细地址" prop="address">
                <el-input v-model="ruleForm.address"></el-input>
              </el-form-item>
              <el-form-item label="仓库类型" prop="warehouse_type">
                <el-select
                  v-model="ruleForm.warehouse_type"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in Ware_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="来源" prop="ownership_type">
                <el-input v-model="ruleForm.ownership_type"></el-input>
              </el-form-item>
              <el-form-item label="组织id" prop="branch_id">
                <el-select v-model="ruleForm.branch_id" placeholder="请选择">
                  <el-option
                    v-for="item in originList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否启用" prop="status">
                <el-switch
                  v-model="ruleForm.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="0"
                  inactive-value="1"
                >
                </el-switch>
              </el-form-item>
              <el-form-item label="描述信息">
                <el-input v-model="ruleForm.remark"></el-input>
              </el-form-item>
              <el-form-item label="温控设备">
                <el-select
                  v-model="ruleForm.temp_device"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in thermometer"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
              :data-tracker="orderstate == '0' ? 'P31-8' : 'P31-10'"
              @click="cancledata()"
              >取 消</el-button
            >
            <el-button
              type="primary"
              data-tracker="P31-7"
              @click="PageAddEntrepot('ruleForm')"
              v-if="orderstate == '0'"
              >确 定
            </el-button>
            <el-button
              type="primary"
              data-tracker="P31-9"
              @click="PageEditEntrepot('ruleForm')"
              v-if="orderstate == '2'"
              >确 定
            </el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  EntrepotList,
  EditEntrepot,
  DetailsEntrepot,
  DeleteEntrepot,
  AddEntrepot,
  thermometerbox, //温度计获取
} from "@/api/information";

import { regionList, PagewebsiteList } from "../common/common";
export default {
  data() {
    return {
      maxheight: "auto",
      title_name: "仓库",
      queryData: {
        page: 1,
        page_size: 10,
        name: "", //仓库名称
        contact: "", //联系人
        serial_number: "", //仓库编号
        provinc: [], //地址
        address: "", //详细地址
      },
      ruleForm: {
        serial_number: "", // 编号
        name: "", // 名称
        contact: "", // 联系人
        contact_mobile: "", // 手机
        province_id: "", // 省id
        city_id: "", // 市id
        district_id: "", // 区id
        address: "", // 详细地址
        warehouse_type: "", // 类型:0常温，1冷链
        ownership_type: "", // 0：内部，1：外部
        branch_id: "", // 网点id
        status: "0", // 状态：0禁用,1启用
        remark: "", // 描述信息
        temp_device: [], // 温控设备:冷链必传（温度计）
        gobalList: [], //选中的地址
      },
      rules: {
        serial_number: [
          { required: true, message: "仓库编号", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请填写发货人名字", trigger: "blur" },
        ],
        contact: [{ required: true, message: "联系人", trigger: "blur" }],
        contact_mobile: [{ required: true, message: "手机", trigger: "blur" }],
        gobalList: [{ required: true, message: "地址", trigger: "blur" }],
        address: [{ required: true, message: "详细地址", trigger: "blur" }],
        warehouse_type: [{ required: true, message: "类型", trigger: "blur" }],
        ownership_type: [{ required: true, message: "来源", trigger: "blur" }],
        branch_id: [{ required: true, message: "网点", trigger: "blur" }],
        status: [{ required: true, message: "始发开启", trigger: "blur" }],
      },
      Ware_type: [
        {
          value: "0",
          label: "常温",
        },
        {
          value: "1",
          label: "冷链",
        },
      ],
      cityList: [], //地址库
      originList: [], //组织的列表
      thermometer: [], //温控设备
      total: 0, //总条数
      currentPage4: 1,
      tableData: [], //列表
      dialogVisible: false, //判断弹框显示隐藏
      orderstate: "", //新增状态0 编辑状态2
      consignerID: "", //发货人的ID
      deletparam: {
        id: [], //多选删的id
      },
      // maxheight:400,
    };
  },
  components: {},
  mounted() {
    // 地址库
    this.provincectiy();
    // 获取组织接口
    this.siteList();
    // 列表
    this.PageEntrepotList();
    // 温度计box
    this.Pagethermometerbox();
    // this.$nextTick(()=>{
    //   this.maxheight=document.body.clientHeight-this.$refs.multipleTable.$el.offsetTop-55
    // })
  },
  methods: {
    // 温度计设备
    Pagethermometerbox() {
      var pame = {
        name: "",
      };
      thermometerbox(pame).then((res) => {
        var res = res.data;
        this.thermometer = res;
      });
    },
    // 获取id
    handleClick(row, type) {
      if (row == undefined) {
        this.title_name = "创建仓库";
        this.orderstate = "0";
        this.clearList();
        this.openClose();
      } else if (row != "" && type == 1) {
        this.title_name = "查看仓库";
        // 将修改的状态赋值为空
        this.orderstate = "";
        this.PageDetailsEntrepot(row.id);
        this.openClose();
      } else if (row != "" && type == 2) {
        this.title_name = "修改仓库";
        this.orderstate = "2";
        this.consignerID = row.id;
        this.PageDetailsEntrepot(row.id);
        this.openClose();
      }
    },
    // 地址库
    provincectiy() {
      regionList(0).then((res) => {
        this.cityList = res.data;
      });
    },
    // 组织管理页面
    siteList() {
      PagewebsiteList("0").then((res) => {
        this.originList = res.data;
      });
    },
    // 分页功能
    handleSizeChange(val) {
      this.queryData.page_size = val;
      //  数据列表接口
      this.PageEntrepotList();
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.queryData.page = val;
      //  数据列表接口
      this.PageEntrepotList();
    },
    // 仓库列表
    PageEntrepotList() {
      var origin_province_id = "";
      if (this.queryData.provinc[0] != undefined) {
        origin_province_id = this.queryData.provinc[0];
      } else {
        origin_province_id = "";
      }
      // 始发地市
      var origin_city_id = "";
      if (this.queryData.provinc[1] != undefined) {
        origin_city_id = this.queryData.provinc[1];
      } else {
        origin_city_id = "";
      }
      // 始发地区
      var origin_district_id = "";
      if (this.queryData.provinc[2] != undefined) {
        origin_district_id = this.queryData.provinc[2];
      } else {
        origin_district_id = "";
      }
      var param = {
        page: this.queryData.page,
        page_size: this.queryData.page_size,
        name: this.queryData.name, //仓库名称
        contact: this.queryData.contact, //联系人
        serial_number: this.queryData.serial_number, //仓库编号
        province_id: String(origin_province_id), // 省
        city_id: String(origin_city_id), //市
        district_id: String(origin_district_id), //区
        address: this.queryData.address, //详细地址
      };
      EntrepotList(param).then((res) => {
        var res = res.data;
        this.total = res.pagination.total;
        if (res.list && res.list.length > 6) {
          //两排操作栏
          this.maxheight = document.documentElement.clientHeight - 265;
        } else {
          this.maxheight = "auto";
        }
        if (res.list == null) {
          var list = [];
          this.Datarouter(list);
        } else {
          this.Datarouter(res.list);
        }
      });
    },
    // 处理数据
    Datarouter(val) {
      var DataList = [];
      for (var i = 0; i < val.length; i++) {
        var temp_device_list = [];
        if (val[i].temp_device != null) {
          for (var j = 0; j < val[i].temp_device.length; j++) {
            temp_device_list.push(val[i].temp_device[j].name + "/");
          }
        }
        DataList.push({
          id: val[i].id,
          serial_number: val[i].serial_number,
          name: val[i].name,
          contact: val[i].contact,
          contact_mobile: val[i].contact_mobile,
          province:
            val[i].province_name +
            "/" +
            val[i].city_name +
            "/" +
            val[i].district_name +
            "/" +
            val[i].address,
          warehouse_type: val[i].warehouse_type == 0 ? "常温" : "冷链",
          ownership_type: val[i].ownership_type,
          branch_id: val[i].branch_name,
          status: val[i].status == 0 ? "启用" : "禁用",
          remark: val[i].remark,
          temp_device: temp_device_list,
        });
      }
      this.tableData = DataList;
    },
    // 仓库编辑
    PageEditEntrepot(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = {
            id: this.consignerID,
            serial_number: this.ruleForm.serial_number, // 编号
            name: this.ruleForm.name, // 名称
            contact: this.ruleForm.contact, // 联系人
            contact_mobile: this.ruleForm.contact_mobile, // 手机
            province_id: this.ruleForm.gobalList[0], // 省id
            city_id: this.ruleForm.gobalList[1], // 市id
            district_id: this.ruleForm.gobalList[2], // 区id
            address: this.ruleForm.address, // 详细地址
            warehouse_type: String(this.ruleForm.warehouse_type), // 类型:0常温，1冷链
            ownership_type: this.ruleForm.ownership_type, // 0：内部，1：外部
            branch_id: String(this.ruleForm.branch_id), // 网点id
            status: this.ruleForm.status, // 状态：0禁用,1启用
            remark: this.ruleForm.remark, // 描述信息
            temp_device: this.ruleForm.temp_device, // 温控设备:冷链必传（温度计）
          };
          EditEntrepot(param).then((res) => {
            if (res.code == 10000) {
              this.$message({
                message: "编辑成功",
                type: "success",
              });
              // 关闭页面
              this.closepop();
              this.PageEntrepotList();
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    // 仓库详情
    PageDetailsEntrepot(id) {
      var param = {
        id: id,
      };
      DetailsEntrepot(param).then((res) => {
        var res = res.data;
        var temp_device_num = [];
        if (res.temp_device != null) {
          res.temp_device.forEach((res) => {
            temp_device_num.push(res.id);
          });
        }
        this.ruleForm.serial_number = res.serial_number;
        this.ruleForm.name = res.name;
        this.ruleForm.contact = res.contact;
        this.ruleForm.contact_mobile = res.contact_mobile;
        this.ruleForm.address = res.address;
        this.ruleForm.warehouse_type = res.warehouse_type;
        this.ruleForm.ownership_type = res.ownership_type;
        this.ruleForm.branch_id = res.branch_id;
        this.ruleForm.gobalList = [
          res.province_id,
          res.city_id,
          res.district_id,
        ];
        this.ruleForm.status = res.status;
        this.ruleForm.remark = res.remark;
        this.ruleForm.temp_device = temp_device_num;
      });
    },
    // 获取多选删除的id号
    handleSelectionChange(val) {
      var deleid = [];
      for (var i = 0; i < val.length; i++) {
        deleid.push(val[i].id);
      }
      this.deletparam.id = deleid;
    },
    // 仓库删除
    PageDeleteEntrepot() {
      var str = JSON.stringify(this.deletparam);
      DeleteEntrepot(str).then((res) => {
        if (res.code == 10000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.PageEntrepotList();
        }
      });
    },
    // 仓库创建
    PageAddEntrepot() {
      var param = {
        serial_number: this.ruleForm.serial_number, // 编号
        name: this.ruleForm.name, // 名称
        contact: this.ruleForm.contact, // 联系人
        contact_mobile: this.ruleForm.contact_mobile, // 手机
        province_id: this.ruleForm.gobalList[0], // 省id
        city_id: this.ruleForm.gobalList[1], // 市id
        district_id: this.ruleForm.gobalList[2], // 区id
        address: this.ruleForm.address, // 详细地址
        warehouse_type: String(this.ruleForm.warehouse_type), // 类型:0常温，1冷链
        ownership_type: this.ruleForm.ownership_type, // 0：内部，1：外部
        branch_id: String(this.ruleForm.branch_id), // 网点id
        status: this.ruleForm.status, // 状态：0禁用,1启用
        remark: this.ruleForm.remark, // 描述信息
        temp_device: this.ruleForm.temp_device, // 温控设备:冷链必传（温度计）
      };

      AddEntrepot(param).then((res) => {
        if (res.code == 10000) {
          this.$message({
            message: "创建成功",
            type: "success",
          });
          // 关闭页面
          this.closepop();
          this.PageEntrepotList();
        }
      });
    },
    // 点击取消
    cancledata() {
      // 清空数据
      this.closepop();
      this.clearList();
    },
    // 点击关闭
    handleClose() {
      // 清空添加的数据
      this.clearList();
      // 关闭页面
      this.closepop();
    },
    //关闭弹框的
    closepop() {
      this.dialogVisible = false;
    },
    // 打开页面
    openClose() {
      this.dialogVisible = true;
    },
    // 清空数据
    clearList() {
      this.ruleForm = {
        serial_number: "", // 编号
        name: "", // 名称
        contact: "", // 联系人
        contact_mobile: "", // 手机
        province_id: "", // 省id
        city_id: "", // 市id
        district_id: "", // 区id
        address: "", // 详细地址
        warehouse_type: "", // 类型:0常温，1冷链
        ownership_type: "", // 0：内部，1：外部
        branch_id: "", // 网点id
        status: "0", // 状态：0启用,1禁用
        remark: "", // 描述信息
        temp_device: [], // 温控设备:冷链必传（温度计）
        gobalList: [], //选中的地址
      };
    },
    // 重置
    resetquery() {
      this.queryData = {
        page: 1,
        page_size: 10,
        name: "", //仓库名称
        contact: "", //联系人
        serial_number: "", //仓库编号
        provinc: [], //地址
        address: "", //详细地址
      };
      this.PageEntrepotList();
    },
  },
};
</script>

<style lang="less" scoped>
.shareContainer {
  padding: 10px 15px;
  background-color: #fff;

  .shareheader {
    background: white;

    .searchContainer {
      display: flex;
      flex-wrap: wrap;
    }
  }

  // 内容
  .sharecontent {
    background: white;

    // 头部内容
    .sharecontent_header {
      .sharecontent_header_right {
        display: inline-block;
      }

      .sharecontent_header_left {
        float: right;
        padding: 0px 8px 0px 0px;
      }
    }

    // 表单内容
    .sharecontent_content {
    }

    .addWarehouse {
      .form {
        .el-form {
          .el-form-item {
            width: 350px;
          }
        }
      }
    }
  }
}
</style>


